<template>
  <!-- 站点管理页面容器 -->
  <div class="site-management-page">
    <!-- ==================== 面包屑导航 ==================== -->
    <div class="breadcrumb-container">
      <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-nav">
        <!-- 主页 -->
        <el-breadcrumb-item :to="{ path: '/' }" class="breadcrumb-item">
          <el-icon class="breadcrumb-icon"><HomeFilled /></el-icon>
          <span>主页</span>
        </el-breadcrumb-item>
        <!-- 产能管理 -->
        <el-breadcrumb-item class="breadcrumb-item">
          <el-icon class="breadcrumb-icon"><Setting /></el-icon>
          <span>产能管理</span>
        </el-breadcrumb-item>
        <!-- 站点管理（当前页） -->
        <el-breadcrumb-item class="breadcrumb-item active">
          <el-icon class="breadcrumb-icon"><Menu /></el-icon>
          <span>站点管理</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ==================== 搜索筛选区域 ==================== -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="searchForm" class="filter-form" inline @keyup.enter="handleSearch">
        <!-- 站点编号/名称搜索框 -->
        <el-form-item>
          <el-input 
            v-model="searchForm.keyword" 
            placeholder="请输入站点编号/名称" 
            clearable 
            style="width: 200px;"
          />
        </el-form-item>
        <!-- 状态筛选下拉框 -->
        <el-form-item>
          <el-select 
            v-model="searchForm.status" 
            placeholder="请选择状态" 
            clearable 
            class="w-120"
          >
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="2" />
          </el-select>
        </el-form-item>
        <!-- 车间筛选下拉框 -->
        <el-form-item>
          <el-select 
            v-model="searchForm.workshopid" 
            placeholder="请选择车间" 
            clearable 
            filterable
            class="w-180"
          >
            <el-option 
              v-for="item in workshopOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <!-- 工序筛选下拉框 -->
        <el-form-item>
          <el-select 
            v-model="searchForm._processid" 
            placeholder="请选择工序" 
            clearable 
            filterable
            class="w-180"
          >
            <el-option 
              v-for="item in processOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <!-- 操作按钮组 -->
        <div class="filter-actions">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </el-form>
    </el-card>

    <!-- ==================== 数据表格区域 ==================== -->
    <el-card class="table-card" shadow="never">
      <!-- 工具栏：新增、批量删除、导出 -->
      <div class="toolbar">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button 
          type="danger" 
          plain 
          :disabled="!multipleSelection.length" 
          @click="handleBatchDelete"
        >
          删除
        </el-button>
        <el-button type="info" plain>导出</el-button>
      </div>

      <!-- 站点管理数据表格 -->
      <el-table
        :data="rows"
        border
        stripe
        :loading="loading"
        class="site-management-table"
        height="640"
        @selection-change="onSelectionChange"
      >
        <!-- 多选列 -->
        <el-table-column type="selection" width="48" />
        
        <!-- 序号列 -->
        <el-table-column type="index" label="序号" width="70" align="center" />
        
        <!-- 站点编号列 -->
        <el-table-column prop="sitecode" label="站点编号" min-width="160" />
        
        <!-- 站点名称列 -->
        <el-table-column prop="sitename" label="站点名称" min-width="160" />
        
        <!-- 站点类型列（带标签显示） -->
        <el-table-column label="站点类型" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.sitetype === 1 ? 'primary' : 'info'">
              {{ scope.row.sitetype === 1 ? '类型一' : '类型二' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- 所在车间列（关联查询结果） -->
        <el-table-column prop="workshopname" label="所在车间" min-width="140" />
        
        <!-- 所属工序列（关联查询结果） -->
        <el-table-column prop="processname" label="所属工序" min-width="140" />
        
        <!-- 站点位置列 -->
        <el-table-column prop="site_location" label="站点位置" min-width="140" show-overflow-tooltip />
        
        <!-- 状态列（带标签显示） -->
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- 设备数量列 -->
        <el-table-column label="设备数" width="90" align="center">
          <template #default="scope">
            <el-tag type="info" size="small">{{ scope.row.deviceCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        
        <!-- 工具数量列 -->
        <el-table-column label="工具数" width="90" align="center">
          <template #default="scope">
            <el-tag type="warning" size="small">{{ scope.row.toolCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        
        <!-- 人员总数列 -->
        <el-table-column label="人员数" width="90" align="center">
          <template #default="scope">
            <el-tag type="success" size="small">{{ scope.row.personCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        
        <!-- 站点描述列（超出显示省略号） -->
        <el-table-column 
          prop="site_Description" 
          label="站点描述" 
          min-width="180" 
          show-overflow-tooltip 
        />
        
        <!-- 操作列（固定在右侧） -->
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleViewDetail(scope.row)">详情</el-button>
            <el-divider direction="vertical" />
            <el-button type="primary" link size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- ==================== 分页器 ==================== -->
      <div class="mt-12 flex-end">
        <el-pagination
          v-model:current-page="pager.page"
          v-model:page-size="pager.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="onPageSizeChange"
          @current-change="onPageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
/**
 * 站点管理页面脚本
 * 功能：站点管理列表展示、查询、新增、编辑、删除等操作
 */

// ==================== 导入依赖 ====================
// Element Plus 图标组件
import { ArrowRight, HomeFilled, Menu, Setting } from '@element-plus/icons-vue'
// Vue 3 Composition API
import { onMounted, reactive, ref } from 'vue'
// Vue Router 路由
import { useRouter } from 'vue-router'
// HTTP 请求工具
import https from '@/Http/http'
// Element Plus 消息提示组件
import { ElMessage, ElMessageBox } from 'element-plus'
import { extractPayload, getErrorMessage, getResponseMessage, isRequestSuccess } from '@/utils/responseHelper'

// ==================== 类型定义 ====================
/**
 * 站点管理项接口定义
 */
interface SiteManagementItem {
  id: number                    // 站点ID（主键）
  sitecode: string              // 站点编号
  sitename: string              // 站点名称
  sitetype: number              // 站点类型
  workshopid: number            // 所在车间ID
  workshopname: string          // 所在车间名称（关联查询结果）
  _processid: number            // 所属工序ID
  processname: string           // 所属工序名称（关联查询结果）
  status: number                // 状态（1-启用，2-停用）
  site_location?: string        // 站点位置（可选）
  site_Description?: string     // 站点描述（可选）
  bz?: string                   // 备注（可选）
  deviceCount?: number          // 设备数量
  toolCount?: number            // 工具数量
  personCount?: number          // 人员总数
}

// ==================== 响应式数据 ====================
/**
 * 表格加载状态
 */
const loading = ref(false)

/**
 * 站点管理列表数据
 */
const rows = ref<SiteManagementItem[]>([])

/**
 * 表格中选中的行数据（用于批量操作）
 */
const multipleSelection = ref<SiteManagementItem[]>([])

/**
 * 分页器配置
 */
const pager = reactive({
  page: 1,      // 当前页码
  size: 10,     // 每页显示条数
  total: 0,     // 总记录数
})

/**
 * 搜索表单数据
 */
const searchForm = reactive({
  keyword: '',                          // 搜索关键词（站点编号/名称）
  status: undefined as number | undefined,  // 状态筛选（1-启用，2-停用）
  workshopid: undefined as number | undefined,  // 车间筛选
  _processid: undefined as number | undefined,  // 工序筛选
})

/**
 * 车间下拉选项
 */
const workshopOptions = ref<{ label: string; value: number }[]>([])

/**
 * 工序下拉选项
 */
const processOptions = ref<{ label: string; value: number }[]>([])

// ==================== 路由实例 ====================
/**
 * Vue Router 实例，用于页面跳转
 */
const router = useRouter()

// ==================== 数据获取方法 ====================
/**
 * 获取站点管理列表数据
 * 功能：调用后端接口获取分页数据，支持关键词和状态筛选
 */
const fetchList = async () => {
  loading.value = true  // 开始加载，显示加载状态
  try {
    // 调用后端读取接口获取站点管理列表
    const response = await https.Reads.get(`/ASite/ASite_ManagementShow`, {
      params: {
        sitenameorcode: searchForm.keyword || undefined,  // 站点编号/名称（模糊查询）
        status: searchForm.status ?? 0,                   // 状态筛选（0-全部）
        workshopid: searchForm.workshopid || 0,           // 车间筛选（0-全部）
        _processid: searchForm._processid || 0,          // 工序筛选（0-全部）
        pageindex: pager.page,                            // 当前页码
        pagesize: pager.size,                            // 每页条数
      },
    })
    
    const payload = extractPayload(response)
    if (!isRequestSuccess(payload) && !Array.isArray(payload?.data ?? payload?.Data)) {
      throw new Error(getResponseMessage(payload, '获取站点管理数据失败'))
    }

    // 处理返回的数据（兼容不同的数据格式）
    const list: SiteManagementItem[] = payload?.data ?? payload?.Data ?? []
    rows.value = list  // 更新表格数据
    
    // 更新总记录数（兼容不同的数据格式）
    pager.total = payload?.totalCount ?? payload?.TotalCount ?? list.length
  } catch (error) {
    // 请求失败时显示错误提示
    ElMessage.error(getErrorMessage(error, '获取站点管理数据失败'))
  } finally {
    loading.value = false  // 结束加载，隐藏加载状态
  }
}

// ==================== 搜索相关方法 ====================
/**
 * 执行搜索
 * 功能：重置页码为第一页，然后重新获取数据
 */
const handleSearch = () => {
  pager.page = 1  // 重置到第一页
  fetchList()      // 重新获取数据
}

/**
 * 重置搜索条件
 * 功能：清空搜索表单，重置页码，然后重新获取数据
 */
const handleReset = () => {
  searchForm.keyword = ''        // 清空搜索关键词
  searchForm.status = undefined  // 清空状态筛选
  searchForm.workshopid = undefined  // 清空车间筛选
  searchForm._processid = undefined  // 清空工序筛选
  pager.page = 1                 // 重置到第一页
  fetchList()                    // 重新获取数据
}

// ==================== 表格相关方法 ====================
/**
 * 表格选择变化事件处理
 * @param val 选中的行数据数组
 * 功能：更新选中的行数据，用于批量操作
 */
const onSelectionChange = (val: SiteManagementItem[]) => {
  multipleSelection.value = val
}

// ==================== 分页相关方法 ====================
/**
 * 每页显示条数变化事件处理
 * @param size 新的每页显示条数
 * 功能：更新每页显示条数，重置到第一页，然后重新获取数据
 */
const onPageSizeChange = (size: number) => {
  pager.size = size  // 更新每页显示条数
  pager.page = 1     // 重置到第一页
  fetchList()        // 重新获取数据
}

/**
 * 页码变化事件处理
 * @param page 新的页码
 * 功能：更新当前页码，然后重新获取数据
 */
const onPageChange = (page: number) => {
  pager.page = page  // 更新当前页码
  fetchList()        // 重新获取数据
}

// ==================== 操作相关方法 ====================
/**
 * 新增站点
 * 功能：跳转到站点新增页面
 */
const handleAdd = () => {
  router.push('/ASite_ManagementAddView')
}

/**
 * 查看站点详情
 * @param row 要查看的站点数据行
 * 功能：跳转到站点编辑页面查看详情（只读模式）
 */
const handleViewDetail = (row: SiteManagementItem) => {
  router.push({
    path: '/ASite_ManagementAddView',
    query: { id: row.id, mode: 'view' }  // 传递站点ID和查看模式
  })
}

/**
 * 编辑站点
 * @param row 要编辑的站点数据行
 * 功能：跳转到站点编辑页面，并传递站点ID作为查询参数
 */
const handleEdit = (row: SiteManagementItem) => {
  router.push({
    path: '/ASite_ManagementAddView',
    query: { id: row.id }  // 传递站点ID，用于编辑模式
  })
}

/**
 * 删除单个站点
 * @param row 要删除的站点数据行
 * 功能：弹出确认对话框，确认后调用后端接口删除站点（逻辑删除）
 */
const handleDelete = async (row: SiteManagementItem) => {
  try {
    // 弹出确认对话框
    await ElMessageBox.confirm(
      `确定要删除站点"${row.sitename}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 调用后端删除接口
    const response = await https.Writes.post('/ASiteADU/SiteManagementDelete', {
      id: row.id
    })

    const data = extractPayload(response)
    const success = isRequestSuccess(data)
    const message = getResponseMessage(data, success ? '删除成功' : '删除失败')
    
    if (success) {
      ElMessage.success(message)
      fetchList()  // 删除成功后刷新列表
    } else {
      ElMessage.error(message)
    }
  } catch (error: any) {
    // 如果用户点击取消，不处理错误
    if (error !== 'cancel') {
      console.error('删除站点失败', error)
      ElMessage.error(getErrorMessage(error, '删除失败'))
    }
  }
}

/**
 * 批量删除站点
 * 功能：弹出确认对话框，确认后批量调用后端接口删除选中的站点（逻辑删除）
 */
const handleBatchDelete = async () => {
  // 检查是否有选中的行
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要删除的站点')
    return
  }

  try {
    // 弹出确认对话框
    await ElMessageBox.confirm(
      `确定要删除选中的 ${multipleSelection.value.length} 条站点吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 批量删除：为每个选中的站点创建删除请求
    const deletePromises = multipleSelection.value.map((item: SiteManagementItem) =>
      https.Writes.post('/ASiteADU/SiteManagementDelete', { id: item.id })
        .then(res => extractPayload(res))
        .catch(err => ({ __error: err }))
    )

    // 并发执行所有删除请求
    const results = await Promise.all(deletePromises)
    
    let successCount = 0
    const failMessages: string[] = []

    results.forEach(result => {
      if ('__error' in result) {
        failMessages.push(getErrorMessage(result.__error, '删除失败'))
        return
      }
      if (isRequestSuccess(result)) {
        successCount += 1
      } else {
        failMessages.push(getResponseMessage(result, '删除失败'))
      }
    })

    // 显示删除结果
    if (successCount > 0) {
      ElMessage.success(`成功删除 ${successCount} 条站点`)
      multipleSelection.value = []  // 清空选中状态
      fetchList()                     // 刷新列表
    }
    if (failMessages.length) {
      ElMessage.error(failMessages.join('；'))
    }
  } catch (error: any) {
    // 如果用户点击取消，不处理错误
    if (error !== 'cancel') {
      console.error('批量删除站点失败', error)
      ElMessage.error(getErrorMessage(error, '批量删除失败'))
    }
  }
}

// ==================== 数据初始化 ====================
/**
 * 获取车间列表
 */
const fetchWorkshops = async () => {
  try {
    const { data } = await https.Reads.get('/ADeviceManagement/AAWorkshopShow')
    const list = Array.isArray(data?.data) ? data.data : []
    workshopOptions.value = list.map((w: any) => ({ label: w.workshopname, value: w.id }))
  } catch (e) {
    workshopOptions.value = []
  }
}

/**
 * 获取工序列表
 */
const fetchProcesses = async () => {
  try {
    const { data } = await https.Reads.get('/AManufacturing_process/GetProcessList')
    const list = Array.isArray(data?.data) ? data.data : []
    processOptions.value = list.map((p: any) => ({ label: p.processname, value: p.id }))
  } catch (e) {
    processOptions.value = []
  }
}

// ==================== 生命周期钩子 ====================
/**
 * 组件挂载时执行
 * 功能：页面加载时自动获取站点管理列表数据和基础数据
 */
onMounted(async () => {
  await Promise.all([fetchWorkshops(), fetchProcesses()])
  fetchList()
})
</script>

<style scoped>
.site-management-page {
  padding: 16px;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #667eea15 0%, #764ba215 50%, #f093fb15 100%);
  background-size: 200px 200px, cover;
  background-position: 0 0, center;
  background-attachment: fixed;
}

.site-management-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.site-management-page > * {
  position: relative;
  z-index: 1;
}

.breadcrumb-container {
  margin-bottom: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  position: relative;
  overflow: hidden;
}

.breadcrumb-nav :deep(.el-breadcrumb__inner) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-item.active :deep(.el-breadcrumb__inner) {
  color: #fff;
  font-weight: 600;
}

.breadcrumb-icon {
  font-size: 16px;
  margin-right: 4px;
}

.filter-card,
.table-card {
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.filter-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-actions {
  display: flex;
  gap: 12px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.site-management-table {
  width: 100%;
}

.mt-12 {
  margin-top: 12px;
}

.w-120 {
  width: 120px;
}

.w-180 {
  width: 180px;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}
</style>

